<template>
    <div>
        <b-jumbotron
            header="Сведения о заказчиках или их представителях"
            class="text-center"
        >
            <router-link
                variant="primary"
                to="/customer/create"
                class="btn btn-primary"
                >Создать заказчика</router-link
            >
        </b-jumbotron>
        <div v-if="!customers[0]" class="container">
            <h1 class="text-center">Заказчики еще не созданы</h1>
        </div>
        <div v-for="customer in customers" v-bind:key="customer.id" class="container">
            <b-card header-tag="header" :title="customer.first_name + ' ' + customer.last_name" class="">
                <b-card-text>email: {{customer.email}}</b-card-text>
                <b-card-text>Идентификатор заказчика: {{customer.id}}</b-card-text>
                <div>
                    <router-link
                        :to="`/customer/${customer.id}`"
                        variant="primary"
                        class="btn btn-primary"
                        >Открыть</router-link
                    >

                    <router-link
                        style="margin-left:10px"
                        :to="`/customer/update/${customer.id}`"
                        variant="primary"
                        class="btn btn-primary"
                        >Изменить</router-link
                    >
                </div>
            </b-card>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            customers: [],
            errors: []
        }
    },
    created() {
        this.$http.get('/customer')
        .then(response => {
            this.customers = response.data
        })
        .catch(e => {
            this.error.push(e)
        })
    }
}
</script>

<style>
</style>
